<template>
  <view class="animated fadeIn faster">
    <!-- 日期选择器 -->
    <!--    <view class="mt-2 p-2 rounded10 d-flex d--between d-flex-middle mb-2">-->
    <!--      <picker mode="date" :value="selectedDate" @change="onDateChange">-->
    <!--        <view class="date-picker-display bg-main colorfff rounded40">-->
    <!--          {{ selectedDate }}-->
    <!--        </view>-->
    <!--      </picker>-->
    <!--    </view>-->

    <!-- 时间轨迹 -->
    <view class="timeline-container px-5 ml-1">

      <!-- 时间轨迹列表 -->
      <view class="timeline-list my-5" v-for="(time, i) in timeTracks?.timeline "
            :key="i">

        <view class="mb-7 " style="margin-left: -30rpx;">
          <text class="bg-main colorfff rounded40  px-2 py-1 " >
            {{ time.date }}
          </text>
        </view>

        <view
            v-for="(track, index) in time?.records"
            :key="index"
            class="timeline-item d-flex "
        >
          <!-- 时间在左侧，减小右边距 -->
          <view class="time-container mr-1 d-flex ">
            <view class="time-label font24 color-primary colorfff rounded40 px-2">{{ track.formatted_time }}</view>
          </view>

          <!-- 时间轴线，移除左边距或减小 -->
          <view class="timeline-line-container">
            <view class="timeline-dot"></view>
            <view class="timeline-line" v-if="index < time?.records.length - 1"></view>
          </view>

          <!-- 内容在右侧 -->
          <view class="timeline-content  d-flex  mt-2 mb-2 d-flex-item">
            <view class="px-1">
              <image style="width: 44rpx;height: 44rpx;" src="/static/tabbar/course.png"></image>
            </view>
            <view class="content-box bg-fff p-2 rounded10 d-flex-item"
                  @click="goUrl(`/subPages/courseDetails/courseDetails?id=${track.course_id}`)"
                >
              <text class="font30 color-33">{{ track.course_name }}</text>
              <view class="d-flex mt-1 d-flex d-flex-between d-flex-middle course-8e8e8e">
                <text class="font28 color-66">{{ track.view_time }}</text>
<!--                <text class="font24">已完成</text>-->
              </view>
            </view>
          </view>

        </view>

      </view>
    </view>
  </view>
</template>


<script>

import {mapState} from "vuex"
import {homeApi} from "@/http/homeApi";

export default {
  data() {
    return {
      useHttps: true,
      autoPlayNext: false,
      selectedDate: this.getCurrentDate(),
      timeTracks: [] // 时间轨迹数据
    }
  },
  mounted() {
    this.loadTimeTracks();
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState,
    }),
  },
  onLoad() {
    this.goMyStudy()
  },
  methods: {
    async goMyStudy() {
      const res = await homeApi.getLearningTrack()
      this.timeTracks = res
    },
    toggleUseHttps(e) {
      this.useHttps = e.target.value;
      uni.setStorageSync('useHttps', this.useHttps);
    },

    toggleAutoPlayNext(e) {
      this.autoPlayNext = e.target.value;
      uni.setStorageSync('autoPlayNext', this.autoPlayNext);
    },

    getCurrentDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },

    onDateChange(e) {
      this.selectedDate = e.target.value;
      // 重新加载该日期的时间轨迹数据
      this.loadTimeTracks();
    },

    // 加载时间轨迹数据
    loadTimeTracks() {
      // 模拟数据，实际应从服务器获取
      this.timeTracks = [
        {
          time: '14:21',
          courseName: '考研英语1',
          duration: '考研英语1 词汇1',
        },
        {
          time: '16:21',
          courseName: '考研英语1',
          duration: '考研英语1 词汇1',
        },
        {
          time: '20:21',
          courseName: '考研英语1',
          duration: '考研英语1 词汇1',
        }
      ];
    },
    goUrl(urlPages, data) {
      if (!this.loginState) {
        uni.showToast({
          title: '未登录，请先登录！',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/subPages/login/login'
          })
        }, 1500)
      } else {
      uni.navigateTo({
        url: urlPages
      })
      }
    }
  }
}

</script>


<style scoped>
.course-8e8e8e {
  color: #8e8e8e;
}

.small-switch {
  transform: scale(0.9);
  zoom: 0.9;
}

.date-picker-display {
  padding: 10rpx 20rpx;
  font-size: 28rpx;
}

.color-primary {
  background: rgba(0, 0, 0, 0.6);
  padding-top: 6rpx;
  padding-bottom: 6rpx;
}

.no-tracks {
  background: #fff;
  border-radius: 10px;
}

/* 时间在左侧样式 */
.time-container {
  width: 120rpx;
  text-align: right;
}

/* 时间轴样式 */
.timeline-line-container {
  position: relative;
  top: 22rpx;
  width: 0rpx;
  left: -6rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-dot {
  width: 6px;
  height: 6px;
  background: rgba(255, 195, 0, 1);
  border: 1px solid rgba(0, 0, 0, 1);
  border-radius: 50%;
}

.timeline-line {
  flex: 1;
  width: 2rpx;
  background-color: rgba(204, 204, 204, 1);
  margin-top: 2px;
}

.content-box {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.time-label {
  width: 100rpx;
  height: 44rpx;
  line-height: 44rpx;
  text-align: center;
}
</style>

